<?php
/*
Template Name: Dashboard
*/

get_template_part('secondary', 'header');
get_template_part('secondary','sidebar');

?>
<div id="dash-content">
    <ul class="resumen">
        <li class="home-agua">
            <h2>Agua</h2>
            <div class="v-canvas">
                <div class="canvas-area">
                    <canvas id="water_chart" height="400"></canvas>
                </div>
            </div>
        </li>
        <li class="home-energia">
            <h2>Energía</h2>
            <div class="v-canvas">
                <div class="canvas-area">
                    <canvas id="energy_chart" height="400"></canvas>
                </div>
            </div>
        </li>
    </ul>   
    <div class="welcome">
        <h2>Bienvenido, ¿Qué desea hacer?</h2>
        <p>En esta plataforma usted puede revisar el balance del uso y resultados de las buenas prácticas ambientales en su empresa.</p>
        <ul>
            <li><a href="<?php echo Helpers::get_user_register_url();?>">Registrar consumo</a></li>
            <li><a href="<?php echo Helpers::get_visualization_url('agua');?>">Ver mis consumos</a></li>
        </ul>
    </div>
</div>



<?php
$current_user = wp_get_current_user();
$user_id = $current_user->ID;

$year = date('Y');
$month = date('m');
if($month == 1){
    $year = $year - 1;
    $month = 12;
} else {
    $month = $month - 1;
}

$previous_year = $year - 1;
$rubro_id = get_user_meta($user_id, 'rubro_profile', true);
$water_listings = $wpdb->get_results("select * from bpa_registry_consumption where user_id = ".$user_id." and type_id = 1 and ((year = ".$year." and month <= ".$month.") or year =".$previous_year.") order by year desc, month desc limit 12");
$water_listings =array_reverse($water_listings, true);
foreach ( $water_listings as $field ) {
  $price_data_water[$field->month] = sprintf("%.2f",$field->price);

}

$labels = get_graph_label_months($water_listings);
?>
<?php
$electricity_listings = $wpdb->get_results("select year, month, sum(price) as price from bpa_registry_consumption where user_id = ".$user_id." and (type_id = 2 or type_id = 3) and ((year = ".$year." and month <= ".$month.") or year = ".$previous_year.") group by year,month ORDER BY year desc, month desc limit 12");
$electricity_listings = array_reverse($electricity_listings,true);
foreach ( $electricity_listings as $field ) {
  $price_data_electricity[$field->month] = sprintf("%.2f",$field->price);
}
?>
<script>
var water_ctx = document.getElementById("water_chart").getContext("2d");
var energy_ctx = document.getElementById("energy_chart").getContext("2d");
var water_data = {
    labels: ['',<?php echo "'".implode($labels, "','")."'"; ?>],
    datasets: [
    {
        label: "Agua",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "#fff",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#000",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [0,<?php echo implode($price_data_water, ",");?>]
    },
    
    ]
};
var energy_data = {
    labels: ['',<?php echo "'".implode($labels, "','")."'"; ?>],
    datasets: [
    {
        label: "Energia",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "#fff",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [0,<?php echo implode($price_data_electricity, ",");?>]
    },
    
    ]
};
var options = {
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleFontColor: "rgba(255,255,255,1)",
    scaleGridLineWidth : 1,
    scaleLabel : "S/. <%= value %>",
    multiTooltipTemplate: "S/. <%= value %>",
    tooltipTemplate: "S/. <%= value %>",
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 5,
    pointDotStrokeWidth : 2,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : true,
    responsive: true,
    maintainAspectRatio: false,
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var myLineChart = new Chart(water_ctx).Line(water_data, options);
var myLineChart = new Chart(energy_ctx).Line(energy_data, options);
</script>